<template>
  <view class="user">
    <!-- 上方显示用户信息的区域 -->
    <view class="userinfo">
      <!-- 信息区域 -->
      <view class="top">
        <view class="avator">
          <uni-icons type="person-filled" size="30" 
            :color="logColor"></uni-icons>
        </view>
		<view class="uname" v-if="store.isLogin">
			<view>{{store.userInfo.username}}</view>
			<view>{{store.userInfo.mobile}}</view>
		</view>
        <view class="uname" v-else @tap="toLogin">点击登录</view>
      </view>
    </view>
    <!-- 下方显示的四项用户操作项 -->
    <view class="list">
      <uni-list>
        <uni-list-item v-for="item,index in manageList" 
          :title="item.name" :show-extra-icon="true"
          :extra-icon="item.icon" clickable link @tap="navto(index)"></uni-list-item>
      </uni-list>
    </view>
  </view>
</template>
<script setup>
	import {ref} from 'vue'
	import { userStore } from '../../store/userStrore';
	let logColor = ref("#ccc")
	let store = userStore()
	const manageList = ref([{
		name: '订单管理',
		icon: {
			color: '#56c48b',
			size: '22',
			type: 'shop'
		}
	}, {
		name: '地址管理',
		icon: {
			color: '#ff6700',
			size: '22',
			type: 'location-filled'
		}
	}, {
		name: '我的收藏',
		icon: {
			color: '#0225ff',
			size: '22',
			type: 'star'
		}
	}, {
		name: '设置',
		icon: {
			color: '#0081b9',
			size: '22',
			type: 'gear'
		}
	}])
	function navto(index){
			uni.showToast({
				title:`你点击的是${manageList.value[index].name}`
			})
		}
		function toLogin(){
			uni.navigateTo({
				url:"/pages/login/login"
			})
		}
</script>
<style lang="scss">
	.user {
		height: calc(100vh - 95px);
		background-color: $uni-bg-color-grey;

		.userinfo {
			height: 200px;
			background-color: #ffab7e;

			.top {
				display: flex;
				align-items: center;
				position: absolute;
				left: 50px;
				top: 45px;

				.avator {
					width: 50px;
					height: 50px;
					background-color: #fff;
					border-radius: 50%;
					text-align: center;
					line-height: 40px;

				}

				.uname {
					color: #fff;
					font-size: 14px;
					padding-left: 5px;
				}
			}
		}

		.list {
			width: 710rpx;
			margin: 20rpx auto;
			border-radius: 10px;
			overflow: hidden;
		}
	}
</style>